let layerIndex;
let num1;
//未实现分页前的显示学生信息
// $(function (){
//
//     //todo write my js code at here
//     $.ajax({
//         url:"/api/student/list"
//     }).done(function (data){
//         console.log(data)
//         let html="";
//         let str="";
//         data.forEach((element,index)=>{
//             html+="<tr>"
//             html+="<td>"+element.id+"</td>"
//             html+="<td>"+element.name+"</td>"
//             html+="<td>"+element.age+"</td>"
//             html+="<td>"+element.sno+"</td>"
//             element.sex===1?str='女':(element.sex===2?str='男':str='未知')
//             html+="<td>"+str+"</td>"
//             html+="<td> <a href='#' onclick='showStudentDlg("+element.id+")'>编辑</a> &nbsp;&nbsp;" +
//                 "<a href='#' onclick='deleteById("+element.id+")'>删除</a></td>"
//             html+="</tr>"
//         });
//         $("#studentTb").html(html);
//
//     });
// });

//按姓名查询
// document.getElementById('search').addEventListener('click',function (){
//     let value=document.getElementById('input').value;
//     let style=document.getElementById('style').value;
//     $.ajax({
//         url: "/api/student/list"
//     }).done(function (data) {
//         let str="";
//         if(value.trim()===""||style==="")
//         {
//             alert("请输入要查询的方式和值");
//         }
//         else {
//             let html1="";
//             let html2="";
//             html1+="<tr>";
//             html1+="<td>"+"id"+"</td>";
//             html1+="<td>"+"姓名"+"</td>";
//             html1+="<td>"+"年龄"+"</td>";
//             html1+="<td>"+"学号"+"</td>";
//             html1+="<td>"+"性别"+"</td>";
//             html1+="<td>"+"更改"+"</td>";
//             html1+="</tr>";
//             $('#tableHead').html(html1)
//             let flag=0;
//             data.forEach((element,index)=>{
//                  let reduceValue=null;
//                  let value1;
//                  //console.log(style)
//                 switch (style) {
//                     case "AAA":{
//                         reduceValue=element.name;
//                         value1=value.trim();
//                         break
//                     }
//                     case "BBB":{
//                         reduceValue=element.sno;
//                         value1=value.trim();
//                         break
//                     }
//                     case "CCC":{
//                         reduceValue=element.age;
//                         value1=parseInt(value.trim(),10);
//                         break
//                     }
//                     default:
//                         break
//
//                 }
//
//                 if(value1===reduceValue){
//                     flag=1;
//                     html2+="<tr>"
//                     html2+="<td>"+element.id+"</td>"
//                     html2+="<td>"+element.name+"</td>"
//                     html2+="<td>"+element.age+"</td>"
//                     html2+="<td>"+element.sno+"</td>"
//                     element.sex===1?str='女':(element.sex===2?str='男':str='未知')
//                     html2+="<td>"+str+"</td>"
//                     html2+="<td> <a href='#' onclick='showStudentDlg("+element.id+")'>编辑</a> &nbsp;&nbsp;" +
//                         "<a href='#' onclick='deleteById("+element.id+")'>删除</a></td>"
//                     html2+="</tr>"
//                 }
//
//             })
//             if(flag===0)
//             {
//                 alert("Not found!");
//
//             }
//             $('#studentByName').html(html2);
//
//         }
//     });
// });

//读取并刷新
// function loadStudentList(){
//     $.ajax({
//         url:"/api/student/list"
//     }).done(function (data){
//         // console.log(data)
//         let html0="";
//         let str="";
//         data.forEach((element,index)=>{
//             html0+="<tr>"
//             html0+="<td>"+element.id+"</td>"
//             html0+="<td>"+element.name+"</td>"
//             html0+="<td>"+element.age+"</td>"
//             html0+="<td>"+element.sno+"</td>"
//             element.sex===1?str='女':(element.sex===2?str='男':str='未知')
//             html0+="<td>"+str+"</td>"
//             html0+="<td> <a href='#' onclick='showStudentDlg("+element.id+")'>编辑</a> &nbsp;&nbsp;" +
//                 "<a href='#' onclick='deleteById("+element.id+")'>删除</a></td>"
//             html0+="</tr>"
//         })
//         $("#studentTb").html(html0)
//     });
// }

/**
 * 弹出学生新增/修改对话框
 */
// function showStudentDlg(id){
//     let title="新增学生"
//     if(id){
//         $("#formId").css("display","block");
//         //编辑
//         title="编辑学生";
//         //读取学生信息并赋值
//         $.ajax({
//             url:"/api/student/"+id,
//             method: "GET"
//         }).done(result=> {
//             console.log(result+"11111");
//             //遍历result对象，并将值填充到#studForm表单当中
//             $.each(result, function (key, value) {
//                 //修改选择器，确保选择器选择的是#studForm内的字段
//                 var field = $('#studForm [name="' + key + '"]');
//
//                 if (field.is(':radio')) {
//                     field.filter('[value="' + value + '"]').prop('checked', true);//选中对应得单选按钮
//                 } else if (field.is(':checkbox')) {
//                     field.prop('checked', value === "yes");//选中复选框
//                 } else {
//                     field.val(value);//填充文本框或其他字段
//                 }
//             });
//         });
//     }
//     else {
//         //新增
//         $("#studForm")[0].reset();
//         $("#formId").css("display","none");
//
//     }
//     layerIndex=layer.open({
//         type:1,
//         title:title,
//         area:['520px','auto'],
//         content:$('#studForm')//捕获层
//     });
//
// }



/**
 * 弹出学生新增对话框
 */
function showStudentDlg(id){
    let title="新增学生"
    //新增
    $("#studForm")[0].reset();
    $("#formId").css("display","none");
    layerIndex=layer.open({
        type:1,
        title:title,
        area:['520px','auto'],
        content:$('#studForm')//捕获层
    });

}

//编辑和新增内部功能
function commitStuDlg(){
    //$("#btnOK").prop("disabled",false).addClass("layui-btn-fluid");//禁用按钮
    let id=$("#id").val();//读取id=id的值
    let formData=$("#studForm").serialize();
    if(id!=null && id!=""){
        //编辑学生
        $.ajax({
            url: "/api/student/update1",
            method:"PUT",
            data:formData
        }).done(result=>{
            console.log("编辑成功")
            sendData(result);
            // console.log("111")
            // console.log(result)
            // console.log("111")

        }).fail((jqXHR,textStatus,errorThrown)=>{
            console.error("Request failed:"+textStatus+"-"+errorThrown);
            //在这里处理错误逻辑
            alert("An error occurred.Please try again.");

        });
    }else{
        //新增学生需要进行
        //（2）将表单信息发送到服务器的insert中，把提交按钮变灰（不可用）
        $.ajax({
            url: "/api/student/add",
            method:"POST",
            data:formData
        }).done(result=>{
            console.log("添加成功")
            sendData(result);

        }).fail((jqXHR,textStatus,errorThrown)=>{
            console.error("Request failed:"+textStatus+"-"+errorThrown);
            //在这里处理错误逻辑
            alert("An error occurred.Please try again.");

        });
    }
    // $("#btnOK").prop("disabled",true).addClass("layui-btn-disabled");//禁用按钮
}
function sendData(result){
    if(result.data.id){
        //（4）读取并刷新原来的学生列表
        showTable(num1);
        console.log(num1)
        //（3）关闭弹出层
        //console.log("add success!");
        if(layerIndex)
            layer.close(layerIndex);
    }
}
//拼凑学生
function getSearchCondtion(){
    let formData={}
    // 遍历每个输入元素， 将其值存储到 formData 对象中
    $('#queryForm').find('input,select').each(function(){
        let name = $(this).attr('name'); // 获取元素的 name 属性
        let value = $(this).val(); // 获取元素的值
        // 只有 name 属性存在且值不为空才会添加到 formData 中
        if (name && value) {
            formData[name] = value;
        }
    });
    return formData;
}
//表格初始化
function showTable(num){
    //(2)表格初始化
    const table = layui.table;
    let student = getSearchCondtion();
    // var student = {name: '张三', age: 22};
    //创建渲染实例
    table.render({
        elem: '#tbStudent',
        url: "/api/student/getbypage/"+num, // 此处为静态模拟数据,实际使用时需换成真实接口
        method: "POST",
        contentType: 'application/json', // 确保以 JSON 格式发送
        where: {"data": student},

        page: true,
        cols: [[
            {type: 'checkbox', fixed: 'left'},
            {field: 'id', fixed: 'left', width: 80, title: 'id', sort: true},
            {field: 'name', title: '姓名'},
            {
                field: 'sno',
                title: '学号',
                width: 150,
            },
            {
                field: 'sex', width: 80, title: '性别', sort: true,
                templet: d => d.sex === 2 ? '男' : (d.sex === 1 ? '女' : '未知'),
            },
            {field: 'age', width: 100, title: '年龄', sort: true},
            {fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#editTemplate'}
        ]],
        done: function (rs) {
            // console. log(rs)
        }
    });

}
function showUp(){
    showTable(0);
    num1=0;
}
function showDown(){
    showTable(1);
    num1=1;
}
//表单验证
layui.use(function () {
    //（1）验证表单是否合法
    layui.form.on('submit(stud-dlg)', function () {
        event.preventDefault();//阻止表单默认提交
        //执行真正的提交代码
        commitStuDlg();
    })
    //初始为倒序
    showTable(0);
});
//表单选中行编辑
layui.use(function () {
    const table = layui.table;
    table.on('tool(tbStudent)',function (obj){
        var data=obj.data;//获得当前行数据
        //console.log(obj);
        if(obj.event==='edit'){
            $("#formId").css("display","block");
            //编辑
            let title="编辑学生";
            //读取学生信息并赋值
            $.each(data, function (key, value) {
                //修改选择器，确保选择器选择的是#studForm内的字段
                var field = $('#studForm [name="' + key + '"]');

                if (field.is(':radio')) {
                    field.filter('[value="' + value + '"]').prop('checked', true);//选中对应得单选按钮
                } else if (field.is(':checkbox')) {
                    field.prop('checked', value === "yes");//选中复选框
                } else {
                    field.val(value);//填充文本框或其他字段
                }
            });

            layerIndex=layer.open({
                type:1,
                title:title,
                area:['520px','auto'],
                content:$('#studForm')//捕获层
            });
            //console.log(layerIndex);
        }
    });
});
//分页查询功能
function search(){
    let student=getSearchCondtion();

    const table=layui.table;
    table.reloadData("tbStudent",{
        where:{data:student}
    });
    console.log("where condition:"+JSON.stringify(student));
}

//分页删除功能
function deleteConfirm(){
    const table = layui.table;
    // 获得表格中的选中状态
    const checkStatus = table.checkStatus('tbStudent'); // 'tbStudent' 是表格的ID或者layui-filter
    console.log(checkStatus);
    // 遍历数组得到 id 的字符串
    const ids = checkStatus.data.map(item => item.id).join(','); // 提取 id 并合并成字符串
    if(ids){
        layer.confirm('确定删除 id 为：' + ids + ' 的值吗？一旦删除不可恢复', { icon: 3 }, function () {
            $.ajax({
                url: "/api/student/delete2/" + ids, // 修改 URL 为批量删除接口
                method: "DELETE"
            }).done(result => {
                showTable(num1); // 重新加载表格数据
                console.log(num1)
            });
            layer.msg('删除成功！');
            layer.closeAll(); // 关闭弹出层
        }, function () {
            // 取消删除操作
        });
    }
    else {
        layer.msg('请先勾选需要删除的学生');
    }
}




//删除功能
// function deleteById(id) {
//     //
//     layer.confirm('确定删除id为：'+id+'的值吗？一旦删除不可恢复', {icon: 3}, function () {
//         $.ajax({
//             url:"/api/student/delete1/"+id,
//             method:"DELETE"
//         }).done(result=>{
//             loadStudentList();
//         });
//         layer.msg('删除成功！');
//         layer.closeAll();//关闭弹出层
//     }, function () {
//
//     });
// }
//
